<template>
  <view>
    <view class="tabBar">
      <view class="state" :style="{height:stateHg + 'px'}"></view>
      <view class="tabBarTitle" :style="{height:tabBarTitleHg + 'px',lineHeight:tabBarTitleHg + 'px'}">
        <view class="fl" :style="{width:tabBarTitleHg + 'px',height:tabBarTitleHg + 'px',lineHeight:tabBarTitleHg + 'px'}" @click="back">
          <i class="iconfont icon-fanhuijiantouxiangqingye"></i>
        </view>
        <view class="center" :style="{height:tabBarTitleHg + 'px'}">
          {{ title }}
        </view>
      </view>
    </view>
    <view class="tabBarFen" :style="{height:stateHg + tabBarTitleHg + 'px'}"></view>
  </view>
</template>

<script>
export default {
  components: {

  },
  props:{
    title:'',
    toIndex:false
  },
  data () {
    return {
      stateHg:0,
      tabBarTitleHg:0
    }
  },
  mounted() {
    this.stateHg = uni.getSystemInfoSync().statusBarHeight;
    let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    this.tabBarTitleHg = menuButtonInfo.height + (menuButtonInfo.top - this.stateHg) * 2;
  },
  methods: {
    back(){
      if(this.toIndex){
        uni.reLaunch({
          url:'/pages/index/index'
        })
      } else{
        uni.navigateBack();
      }
    }
  }
}
</script>

<style lang="less" scoped>
.tabBar{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  .tabBarTitle{
    position: relative;
    .fl{
      text-align: center;
      i{
        font-style: normal;
        font-size: 37rpx;
        color: #fff;
      }
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
    }
    .center{
      font-size: 36rpx;
      color: #fff;
      position: absolute;
      left: 0;
      width: 100%;
      text-align: center;
    }
  }
}
</style>
